<template>
    <div>
        <div>
            房型名称
            <input type="text" v-model="queryInfo.housetypeName">
            <input type="button" value="查询" class="btn btn-primary" @click="show">
        </div>

        <h1>房型列表</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @change=""></td>
                    <td>房型ID</td>
                    <td>房型名称</td>
                    <td>门市价</td>
                    <td>押金</td>
                    <td>房型面积</td>
                    <td>可住人数</td>
                    <td>可否加床</td>
                    <td>状态</td>
                    <td>房型图片</td>
                    <td>房型介绍</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :value="item.Id">
                    <td><input type="checkbox" v-model="ids" @change=""></td>
                    <td>{{ item.Id }}</td>
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.HouseTypePrice }}</td>
                    <td>{{ item.YaMoney == 1 ? "不需要" : "需要" }}</td>
                    <td>{{ item.HouseTypeSize }}</td>
                    <td>{{ item.HouseTypePeople }}</td>
                    <td>{{ item.IfAddbed }}</td>
                    <td>{{ item.HouseTypeState == 1 ? "上架" : "下架" }}</td>
                    <td> <img :src="item.HouseTypePhoto" alt="" width="100px" height="100px"></td>
                    <td>{{ item.HouseTypeIntro }}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.Id)">
                        <input type="button" value="编辑" class="btn btn-info" @click="detail(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>

        <div>
            <span>共{{ data.totalCount }}条</span>
            <span>共{{ data.totalPage }}页</span>
            <span>当前第{{ queryInfo.pageIndex }}/{{ data.totalPage }}页</span>

            <select v-model="queryInfo.pageSize" @change="show">
                <option value="">请选择</option>
                <option v-for="item in arr" :value="item">每页{{ item }}条</option>
            </select>

            <input type="button" value="首页" class="btn btn-primary" @click="getPage(1)">
            <input type="button" value="上一页" class="btn btn-primary" @click="getPage(queryInfo.pageIndex - 1)">
            <span v-for="item in data.totalPage" @click="getPage(item)">{{ item }}</span>
            <input type="button" value="下一页" class="btn btn-primary" @click="getPage(queryInfo.pageIndex + 1)">
            <input type="button" value="尾页" class="btn btn-primary" @click="getPage(data.totalPage)">
            <input type="number" v-model="queryInfo.pageIndex">
            <input type="button" value="跳转到" class="btn btn-primary" @click="getPage(queryInfo.pageIndex)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

let queryInfo: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    housetypeName: ''
})

let data: any = reactive({
    totalCount: 0,
    totalPage: 0,
    list: []
})

let arr: any = ref([2, 4, 6, 8])

let checked:any=ref(false)

let ids:any=ref([])

onMounted(() => {
    getType()
})

const show = () => {
    queryInfo.pageIndex = 1;
    getType()
}

const getPage = (num: any) => {
    if (num < 1) {
        alert('页码不能为负数')
        queryInfo.pageIndex = 1
        return
    }
    if (num > data.totalPage) {
        alert('页码超出最大范围')
        queryInfo.pageIndex = data.totalPage
        return
    }
    queryInfo.pageIndex = num;
    getType()
}

const getType = () => {
    axios({
        url: '/api/HouseType/ShowHouseType',
        method: 'get',
        params: queryInfo
    })
        .then(res => {
            console.log(res);
            Object.assign(data, res.data)
        })
        .catch(err => {
            console.log(err);

        })
}

const del=(id:any)=>{
    let f=confirm('确认删除该房型信息吗？')
    if(f){
        axios({
            url:'/api/HouseType/DelType',
            method:'delete',
            params:{
                id:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功')
                getType()
            }
            else{
                alert('删除失败')
                return
            }
        })
        .catch(err=>{
            console.log(err);
            
        })
    }
}

const detail=(id:any)=>{
    router.push({
        path:'/updType',
        query:{
            id:id
        }
    })
}

</script>

<style scoped>
span {
    margin: 0 10px;
}

input {
    margin: 0 10px;
}
</style>